<template>
     <div class="menu-header">
     		<div class="my-home">
		    
		    <div class="float-left">
          <router-link to="/myHome">
		    	  <img src="../images/person.png" class="person">
          </router-link>
		    </div>

		    <div class="float-right">
          <router-link to="/hasOrder">
		         <i class="icon-x icon-x6"></i>&nbsp;<span>已点订单</span>
          </router-link>
		    </div>
	    </div>


		<!-- 优惠活动消息和tab切换 -->
		  <div class="discount-message" v-if="isShow">
		    <img src="../images/broadcast.png">
		    &nbsp;<span style="vertical-align: middle;">{{discountMsg}}</span>
		  </div>

		  <div class="tab">
          <ul>
              <li>
              <router-link to="/menu">菜单列表</router-link>
              </li>
              <li>
              <router-link to="/storeInfo">餐厅详情</router-link>
              </li>
          </ul>
      </div>

	</div>
        
</template>

<script type="text/ecmascript-6">
 const SUCCESS = 200;
  export default {
    data(){
      return {
        discountMsg:null,
        isShow:false
      }
    },
    created () {
      let discount = window.localStorage.getItem('discount');
      if(discount != null && discount != "" && discount != undefined){
        discount = JSON.parse(discount);
        this.isShow = true;
        this.discountMsg = discount.name;
      }
    }
  };

</script>

<style  lang="less" scoped>
.menu-header { 
  	position: fixed;
  	top: 0;
  	left: 0;
  	z-index:100;
  	width:100%;

    .my-home {
    	height: 45px;
    	line-height: 45px;
    	color: #313131;
    	background: #fff; 
    	padding: 0 10px;
    	position: relative;

        &:before {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid #BCBAB6;
            color: #BCBAB6;
            -webkit-transform-origin:0 100%;
            transform-origin:0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }

        .person {
          width: 19px;
          height: 21px;
          vertical-align: middle;
        }
    }

    .discount-message {
      background: #c4e8e7;
      padding:5px 12px;
      font-size: 13px;
      color: #307f7c;
    }

    .discount-message img {
      width: 13px;
      height: 12px;
      vertical-align: middle;
    }

    .tab {
        overflow: hidden;
        background: white;
        height: 38px;
        &:before {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-bottom: 1px solid #BCBAB6;
            color: #BCBAB6;
            -webkit-transform-origin:0 100%;
            transform-origin:0 100%;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }

      li {
        width: 50%;
        float: left;
        background: white;
          
           a {
              display: block;
              width:100px;
              padding: 10px;
              text-align: center;
              text-decoration: none;
              color: #7a7a7a;
              margin: 0 auto;

              &.active {
                  color: #11bcb4;
                  border-bottom:1px solid #11bcb4;
              }
            }
          }
      }
    
}
</style>
